<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>顶吹炉实时数据图表</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/swiper.min.css">
    <link rel="stylesheet" href="../../css/style.css">
    <style>
        .data_page {
            /*background-color: #0c1021;*/
        }

        .big-tab-item {
            width: auto;
            padding: 0 5px;
            /*height: 30px;*/
            font-size: 16px;
            color: #b9bfcd;
            /*line-height: 30px;*/
            height: 26px;
            line-height: 26px;
            text-align: center;
            cursor: pointer;
            background-color: #073370;
        }

        .big-tab-item.on {
            color: #ffffff;
            background-image: -moz-linear-gradient(0deg, rgb(27, 183, 222) 0%, rgb(28, 76, 156) 0%, rgb(22, 120, 221) 51%, rgb(22, 172, 221) 100%);
            background-image: -webkit-linear-gradient(0deg, rgb(27, 183, 222) 0%, rgb(28, 76, 156) 0%, rgb(22, 120, 221) 51%, rgb(22, 172, 221) 100%);
            background-image: -ms-linear-gradient(0deg, rgb(27, 183, 222) 0%, rgb(28, 76, 156) 0%, rgb(22, 120, 221) 51%, rgb(22, 172, 221) 100%);
        }

        .swiper-container {
            width: 450px;
            height: 280px;
        }

        .tab {
            position: absolute;
            right: 0;
            z-index: 2;
        }

        .tab-item {
            /*width: 36px;*/
            /*height: 30px;*/
            width: 31px;
            height: 26px;
            font-size: 16px;
            color: #b9bfcd;
            line-height: 26px;
            text-align: center;
            cursor: pointer;
            background-color: #073370;
        }

        .tab-item.on {
            color: #ffffff;
            background-image: -moz-linear-gradient(0deg, rgb(27, 183, 222) 0%, rgb(28, 76, 156) 0%, rgb(22, 120, 221) 51%, rgb(22, 172, 221) 100%);
            background-image: -webkit-linear-gradient(0deg, rgb(27, 183, 222) 0%, rgb(28, 76, 156) 0%, rgb(22, 120, 221) 51%, rgb(22, 172, 221) 100%);
            background-image: -ms-linear-gradient(0deg, rgb(27, 183, 222) 0%, rgb(28, 76, 156) 0%, rgb(22, 120, 221) 51%, rgb(22, 172, 221) 100%);
        }


        .content-item {
            width: 450px;
            height: 200px;
        }


    </style>

</head>
<body class="data_page">
<div class="big-tab fix">
    <div class="big-tab-item l on">熔铸</div>
    <div class="big-tab-item l">铜熔炼</div>
</div>

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="tab fix">
                <div class="tab-item l on">日</div>
                <div class="tab-item l">月</div>
            </div>
            <div class="tab-content">
                <div class="content-item " id="chart1"></div>
                <div class="content-item hide" id="chart2"></div>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="tab fix">
                <div class="tab-item l on">日</div>
                <div class="tab-item l">月</div>
            </div>
            <div class="tab-content">
                <div class="content-item " id="chart3"></div>
                <div class="content-item hide" id="chart4"></div>
            </div>
        </div>
    </div>

</div>


</body>
<script type="text/javascript" charset="utf-8" src="../../js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../js/echarts.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../js/swiper.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../js/common.js"></script>
<script>
	$(function () {
		let mySwiper;

		$('body').on('click', '.tab-item', function () {
			let index = $(this).parents('.swiper-slide').index();
			$(this).addClass('on').siblings().removeClass('on');
			$('.swiper-slide').eq(index).find('.content-item').eq($(this).index()).show().siblings().hide();
		})

		$('body').on('click', '.big-tab-item', function () {
			$(this).addClass('on').siblings().removeClass('on');
			mySwiper.slideTo($(this).index())
		})

		getData()

		setInterval(function () {

			getData()

		}, 60000)

		function getData() {
			Promise.all([
				$.ajax({
					type: 'GET',
					url: '../../json/zzp_nc_rg_d.json',
					dataType: 'json',
				}),
				$.ajax({
					type: 'GET',
					url: '../../json/zzp_nc_rg_m.json',
					dataType: 'json',
				}),
				$.ajax({
					type: 'GET',
					url: '../../json/zzp_nc_trl_d.json',
					dataType: 'json',
				}),
				$.ajax({
					type: 'GET',
					url: '../../json/zzp_nc_trl_m.json',
					dataType: 'json',
				})
			]).then(function (datas) {
				const data1 = datas[0];
				const data2 = datas[1];
				const data3 = datas[2];
				const data4 = datas[3];

				const legend1 = ['投入-二次镍精矿', '产出-镍阳极板'];//熔铸
				const legend2 = ['投入-二次铜精矿', '产出-铜阳极板'];//铜熔炼

				let rongzhuDay = {}, rongzhuMonth = {}, tongDay = {}, tongMonth = {};

				//熔铸-日
				let rongzhutime = data1.data.map(item => item.dataDay)
				let rongzhutimes = [...new Set(rongzhutime)]
				let rongzhutimeLine = rongzhutimes.sort((a, b) => {
					return a - b
				});
                let prev = rongzhutimeLine.filter((item)=> {
                    return parseInt(item) < 25
                })
                let back =rongzhutimeLine.filter((item)=> {
                    return parseInt(item) >24
                })
                rongzhutimeLine=back.concat(prev)
				let rzdtouru = [], rzdchanchu = [];
				for (let i = 0; i < rongzhutimeLine.length; i++) {
					let cl = 0, yl = 0;
					for (let j = 0; j < data1.data.length; j++) {
						if (data1.data[j].dataDay === rongzhutimeLine[i] && data1.data[j].groupName === '投入') {
							cl = Number(data1.data[j].rjsl)
						}
						if (data1.data[j].dataDay === rongzhutimeLine[i] && data1.data[j].groupName === '产出') {
							yl = Number(data1.data[j].rjsl)
						}
					}
					rzdtouru.push(cl);
					rzdchanchu.push(yl);
				}
				rongzhuDay.xData = rongzhutimeLine.map(item => item + '日');
				rongzhuDay.yData1 = rzdtouru;
				rongzhuDay.yData2 = rzdchanchu;
				drawChart('chart1', rongzhuDay, legend1);

				//熔铸-月
				let rongzhuMtime = data2.data.map(item => item.month)
				let rongzhuMtimes = [...new Set(rongzhuMtime)]
				let rongzhuMtimeLine = rongzhuMtimes.sort((a, b) => {
					return a - b
				});

				let rzmtouru = [], rzmchanchu = [];
				for (let i = 0; i < rongzhuMtimeLine.length; i++) {
					let cl = 0, yl = 0;
					for (let j = 0; j < data2.data.length; j++) {
						if (data2.data[j].month === rongzhuMtimeLine[i] && data2.data[j].groupName === '投入') {
							cl = Number(data2.data[j].yljsl)
						}
						if (data2.data[j].month === rongzhuMtimeLine[i] && data2.data[j].groupName === '产出') {
							yl = Number(data2.data[j].yljsl)
						}
					}
					rzmtouru.push(cl);
					rzmchanchu.push(yl);
				}
				rongzhuMonth.xData = rongzhuMtimeLine.map(item => item + '月');
				rongzhuMonth.yData1 = rzmtouru;
				rongzhuMonth.yData2 = rzmchanchu;
				drawChart('chart2', rongzhuMonth,legend1);

				//tong-日
				let tongtime = data3.data.map(item => item.dataDay)
				let tongtimes = [...new Set(tongtime)]
				let tongtimeLine = tongtimes.sort((a, b) => {
					return a - b
				});
                let prev1 = tongtimeLine.filter((item)=> {
                    return parseInt(item) < 25
                })
                let back1 =tongtimeLine.filter((item)=> {
                    return parseInt(item) >24
                })
                tongtimeLine=back1.concat(prev1)
				let tongdtouru = [], tongdchanchu = [];
				for (let i = 0; i < tongtimeLine.length; i++) {
					let cl = 0, yl = 0;
					for (let j = 0; j < data3.data.length; j++) {
						if (data3.data[j].dataDay === tongtimeLine[i] && data3.data[j].groupName === '投入') {
							cl = Number(data3.data[j].rjsl)
						}
						if (data3.data[j].dataDay === tongtimeLine[i] && data3.data[j].groupName === '产出') {
							yl = Number(data3.data[j].rjsl)
						}
					}
					tongdtouru.push(cl);
					tongdchanchu.push(yl);
				}
				tongDay.xData = tongtimeLine.map(item => item + '日');
				tongDay.yData1 = tongdtouru;
				tongDay.yData2 = tongdchanchu;
				drawChart('chart3', tongDay,legend2);

				//铜-月
				let tongMtime = data4.data.map(item => item.month)
				let tongMtimes = [...new Set(tongMtime)]
				let tongMtimeLine = tongMtimes.sort((a, b) => {
					return a - b
				});

				let tongmtouru = [], tongmchanchu = [];
				for (let i = 0; i < tongMtimeLine.length; i++) {
					let cl = 0, yl = 0;
					for (let j = 0; j < data4.data.length; j++) {
						if (data4.data[j].month === tongMtimeLine[i] && data4.data[j].groupName === '投入') {
							cl = Number(data4.data[j].yljsl)
						}
						if (data4.data[j].month === tongMtimeLine[i] && data4.data[j].groupName === '产出') {
							yl = Number(data4.data[j].yljsl)
						}
					}
					tongmtouru.push(cl);
					tongmchanchu.push(yl);
				}
				tongMonth.xData = tongMtimeLine.map(item => item + '月');
				tongMonth.yData1 = tongmtouru;
				tongMonth.yData2 = tongmchanchu;
				drawChart('chart4', tongMonth,legend2);
				if (mySwiper) {
					mySwiper.destroy(false); //移除所有slide监听事件，所以拖动和click事件失效了。
				}

				mySwiper = new Swiper('.swiper-container', {
					autoplay: {
						delay: 3000,
						stopOnLastSlide: false,
						disableOnInteraction: true,
					},
					// loop: true, // 循环模式选项
					on: {
						slideChangeTransitionStart: function () {
							// alert(this.activeIndex);
							$('.big-tab-item').eq(this.activeIndex).addClass('on').siblings().removeClass('on');
						},
					}
				})
			})
		}


		function drawChart(id, data,legend) {
			let chartDom = document.getElementById(id);
			let myChart = echarts.init(chartDom);
			let option;

			option = {
				tooltip: {
					trigger: 'axis',
					backgroundColor: 'rgba(0,0,0,.7)',
					borderColor: 'rgba(0,0,0,0)',
					textStyle: {
						color: '#fff'
					}
				},
				grid: {
					left: '2%',
					right: '4%',
					bottom: '14%',
					top: '16%',
					containLabel: true,
				},
				legend: {
					data: legend || ['投入', '产出'],
					left: '7%',
					top: '5px',
					textStyle: {
						color: '#ffffff',
					},
					itemWidth: 15,
					itemHeight: 10,
					itemGap: 25,
				},
				xAxis: {
					type: 'category',
					data: data.xData,
					axisLine: {
						lineStyle: {
							color: '#cdd5e2',
						},
					},
					axisLabel: {
						textStyle: {
							fontSize: 14,
							color: '#ffffff',
						},
					},
				},
				yAxis: [
					{
						type: 'value',
						axisLine: {
							show: false,
							lineStyle: {
								color: '#cdd5e2',
							},
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: '#2a3d57',
							},
						},
						axisLabel: {
							textStyle: {
								fontSize: 14,
								color: '#ffffff',
							},
						},
					},
					{
						type: 'value',
						nameTextStyle: {
							color: '#ffffff',
						},
						position: 'right',
						axisLine: {
							lineStyle: {
								color: '#cdd5e2',
							},
						},
						splitLine: {
							show: false,
						},
						axisLabel: {
							show: false,
						},
					},
				],
				series: [
					{
						name: legend[0] || '投入',
						type: 'bar',
						barWidth: '5px',
						itemStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
									{offset: 0, color: '#7afff5',},
									{offset: 1, color: '#1f7cd3',},
								]),
								barBorderRadius: 6,
							},
						},
						data: data.yData1,
					},
					{
						name: legend[1] || '产出',
						type: 'line',
						yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
						smooth: false, //平滑曲线显示

						symbolSize: 0, //标记的大小
						lineStyle: {
							color: '#43cf31',
						},
						areaStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
										[
											{offset: 0, color: 'rgba(36,240,69,0.3)',},
											{offset: 0.8, color: 'rgba(36,240,69,0)',},
										],
										false
								),
							},
						},
						data: data.yData2,
					},
				],
			};


			option && myChart.setOption(option);
		}

	})
</script>
</html>
